<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">购物车</div>
						<div>
							<!-- <el-button type="success" class="book-add" @click="dialogVisible = true"
								v-show="addshow"></el-button> -->
							<el-button type="success" class="book-add" @click="dialogVisible = true" v-show="addshow">添加订单</el-button>
							<el-button type="danger" class="book-add" @click="reLoad">刷新数据</el-button>
							<el-button type="primary" class="book-add">总价：{{ getSum }}元</el-button>
						</div>
					</el-header>
					<el-table :data="cartList" border style="width: 100%" v-loading="isLoading" max-height="480">
						<el-table-column prop="picture" label="图片">
							<template #default="scope">
								<el-image :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`"></el-image>
							</template>
						</el-table-column>
						<el-table-column prop="book.name" label="名称" />
						<el-table-column prop="book.price" label="价钱" />
						<el-table-column width="230" label="商品数量">
							<template #default="scope">
								<el-input-number v-model="scope.row.cart.num" :min="1" :max="999" controls-position="right" />
							</template>
						</el-table-column>

						<el-table-column label="商品总价">
							<template #default="scope">
								{{ scope.row.book.price * scope.row.cart.num }}
							</template>
						</el-table-column>

						<el-table-column label="复选框">
							<template #default="scope">
								<el-checkbox border v-model="scope.row.checked" @change="isShowBtn"></el-checkbox>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>

		</div>

		<el-dialog v-model="dialogVisible" title="订单确认详情" width="80%">
			<el-table :data="orderList" border style="width: 100%" max-height="200">
				<el-table-column prop="picture" label="图片">
					<template #default="scope">
						<el-image :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="book.name" label="名称" />
				<el-table-column prop="book.price" label="价钱" />
				<el-table-column label="商品总价">
					<template #default="scope">
						{{ scope.row.book.price * scope.row.cart.num }}
					</template>
				</el-table-column>

			</el-table>
			<el-form :model="formData" class="demo-form-inline formstyle" label-position="left" v-show="formshow">
				<el-form-item label="请输入收货地址">
					<el-input v-model.lazy="formData.addr" placeholder="收货地址不允许为空"></el-input>
				</el-form-item>
				<el-form-item label="请输入收货电话">
					<el-input v-model.lazy="formData.phone" placeholder="电话不允许为空"></el-input>
				</el-form-item>
			</el-form>
			<el-descriptions title="收货信息" v-show="infoshow" class="infodata" border>
				<el-descriptions-item label="订单号码">{{ ordid }}</el-descriptions-item>
				<el-descriptions-item label="收货电话">{{ formData.phone }}</el-descriptions-item>
				<el-descriptions-item label="收货地址">{{ formData.addr }}</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="putOrder" v-if="orderbtn === 0">
						确定下单
					</el-button>
					<el-button type="success" v-if="orderbtn === 1">
						订单添加成功,订单号为: {{ ordid }}
					</el-button>
					<el-button type="danger" @click="goPay" v-if="orderbtn === 1">
						去付款
					</el-button>
					<el-button type="danger" @click="payMoney" v-if="orderbtn === 2">
						未付款, 点击付款
					</el-button>

					<el-button type="success" v-if="orderbtn === 3">
						付款成功
					</el-button>
					<el-button type="danger" @click="dialogVisible = true" v-if="orderbtn === 3">
						关闭支付
					</el-button>
				</span>
			</template>
		</el-dialog>




	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
import { $get, $post, $postJson } from "@/ajax";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			cartList: [],
			orderList: [],
			showList: [],
			total: 0,
			num: 20,
			closed: "",
			showLoading: showLoading,
			sum: 0,
			dialogVisible: false,
			dialogVisible2: false,
			orderbtn: 0,
			formData: {
				addr: '',
				phone: ''
			},
			paylist: [],

			addshow: false,
			ordid: '',
			formshow: true,
			infoshow: false,
			payshow: '',

			infoshowData: {
				addr: '',
				phone: '',
				ordid: ''
			}

		}
	},
	methods: {

		// 刷新页面
		reLoad () {
			window.location.reload();
		},

		//获取列表
		async getOrderList () {
			this.isLoading = true;
			const result = await $get(`/api/fore/cart/findAll`);
			if (result.status === 200) {
				this.cartList = result.data.data;
				this.showLoading();
			}
		},

		// 获取勾选的的数据
		isShowBtn () {
			let order = [];
			let count = 0;
			let orderdata = {}
				; for (let i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked == true) {
						orderdata = {
							bookid: this.cartList[i].cart.bookid,
							num: this.cartList[i].cart.num,
							price: this.cartList[i].book.price,
						}
						order.push(this.cartList[i]);
						count += this.cartList[i].book.price * this.cartList[i].cart.num;
					}

				}

			this.paylist.push(orderdata);
			this.sum = count;
			this.orderList = order;
			// 订单按钮的显示与隐藏
			order.length == 0 ? this.addshow = false : this.addshow = true;

		},
		// 添加订单
		async putOrder () {

			// 判断收货信息不为空
			if (this.formData.addr == '' || this.formData.phone == '') {
				this.$message({
					message: '收货信息不允许为空',
					type: 'warning',
					duration: 1000
				});
				return;
			}


			// 发起异步请求
			const result = await $postJson(`/api/fore/cart/addCart2Order`, this.paylist);

			if (result.status === 200) {
				// 切换按钮显示
				this.orderbtn = 1;
				this.ordid = result.data.data.ordid;
				this.$message({
					message: '成功接收到数据, 并产生订单 ....',
					type: 'success',
					duration: 1000
				});

				// const addForm = await $postJson(`/api/fore/cart/addOrder`, {
				// 	ordid: this.ordid,
				// 	addr: this.formData.addr,
				// 	phone: this.formData.phone
				// });
				// // 判断状态
				// if (addForm.status === 200) {

				// }
			}
		},

		// 跳转支付
		goPay () {
			this.formshow = false;
			this.infoshow = true;
			this.infoshowData.addr = this.formData.addr;
			this.infoshowData.phone = this.formData.phone;
			this.infoshowData.ordid = this.ordid;
			this.orderbtn = 2;
		},

		// 支付
		async payMoney () {
			const data = {
				oriid: this.ordid,
				ispay: 1
			}
			const result = await $postJson(`/api/fore/ord/addPay`, data);
			if (result.status === 200) {
				this.orderbtn = 3;
				this.$message({
					message: '付款成功',
					type: 'success',
					duration: 1000
				});
			}
		},

	},


	computed: {
		//计算总价
		getSum () {
			let sumPrice = 0;
			for (let i = 0; i < this.cartList.length; i++) {
				if (this.cartList[i].checked == true) {
					sumPrice += this.cartList[i].book.price * this.cartList[i].cart.num;
				}
			}
			return sumPrice;
		},
	},

	created () {
		this.getOrderList()
	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-top: -10px;
}

.infodata {
	margin-top: 20px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-image {
	width: 40px;
	height: 40px;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}


.default {
	color: rgb(89, 166, 255) !important;
}

.nopay {
	color: rgb(139, 0, 0) !important;
}

.pays {
	color: green;
}

.img img {
	width: 40px;
	height: 40px;
}

.formstyle {
	margin-top: 20px;
}
</style>






